<template>
  <div class="video-admin">
    <ul class="menu">
      <li :class="['content', menuActive == index ? 'active-content' : '']" v-for="(item, index) in activeMenuList" :key="index" @click="handleMenu(index)">
        {{ item }}
      </li>
    </ul>
    <div class="video-admin-box" v-show="menuActive == 1">
      <MyHeader>
        <div slot="title">视频信息</div>
      </MyHeader>
      <div class="video-list">
        <div class="upload-icon">
          <div class="box" @click="goUpload">
            <img src="@/static/img/editPersonalHome/upload_icon.png" alt="" />
          </div>
          <div class="btn">
            <div class="share" @click="goUpload">上传作品</div>
          </div>
        </div>
        <div class="video-info" v-for="(item, index) in artWorkList" @click="goEdit(item)">
          <div class="box">
            <el-image
              :src="item.video_page"
              alt=""
              fit="cover"
            />
          </div>
          <div class="info">
            <div class="title">
              {{ item.video_name }}
            </div>
            <div class="type-name">
              {{ menuList.find((s) => s.data_id == item.type)?.name }}
            </div>
            <div class="time">
              {{ item.upload_time }}
            </div>
            <div class="collect">
              <p>
                <img src="@/static/img/editPersonalHome/zhenyan.png" alt="" />
                {{ item.view_times }}
              </p>
              <p>
                <img src="@/static/img/editPersonalHome/share.png" alt="" />
                {{ item.share_times }}
              </p>
              <p>
                <img src="@/static/img/editPersonalHome/favorite.png" alt="" />
                {{ item.focus_total }}
              </p>
            </div>
          </div>
          <div class="btn">
            <div class="share" @click="handleShare(item.data_id, item.share_times)">分享</div>
            <div class="delete" :loading="delLoading" @click.stop="handleDel(item)">删除</div>
            <div class="edit" @click="goEdit(item)">编辑</div>
          </div>
        </div>
      </div>
      <Pagin
        ref="page"
        v-show="artWorkList.length !== 0"
        :func="getDataList"
        :pagesSizes="[10, 20, 30, 50]"
        :sizeNum="10"
        :layout="'prev, pager, next'"
        :background="true"
        :position="'center'"
        class="pagin"
      ></Pagin>
    </div>
    <UploadVideo ref="uploadVideo" :data_id="data_id" v-show="menuActive == 0" />
  </div>
</template>

<script>
import Pagin from "@/components/pagin.vue";
import MyHeader from "./common/myHeader.vue";
import UploadVideo from "../uploadVideos"

import { getImgUrl } from "@/utils/downloadFile";

export default {
  name: "",
  components: {
    Pagin,
    MyHeader,
    UploadVideo
  },
  props: {},
  data() {
    return {
      artWorkList: [],
      delLoading: false,
      menuList: [],
      menuActive: 0,
      activeMenuList: [
        '视频上传',
        '视频管理'
      ],
      data_id: ''
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$refs.page.refresh();
    this.videoType()
  },
  methods: {
    handleMenu(index) {
      this.menuActive = index
      if (index == 1) {
        this.$refs.page.refresh();
      } else {
        // this.$refs.uploadVideo.resetForm()
        this.data_id = ''
      }
    },
    videoType() {
      this.$api.videoType({}).then(res => {
        if (res.status == "$SUCCESS") {
          this.menuList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        }
      })
    },
    getImgUrl,
    goUpload() {
      // this.$router.push("/editPersonalHome/uploadVideos");
      this.menuActive = 0
      this.data_id = ''
    },
    handleDel(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delLoading = true
        this.$api.delArtVideo({ data_id: item.data_id }).then(res => {
          if (res.status === "$SUCCESS") {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败请联系管理员')
          }
        }).finally(() => {
          this.delLoading = false;
          this.$refs.page.refresh();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      console.log('item', item.data_id)
    },
    goEdit(item) {
      this.menuActive = 0
      this.data_id = item.data_id
    },
    getDataList(page, page_size, callback) {
      console.log('视频', this.$store.state.user.info?.user_info)
      this.$api
        .getArtVideoList({
          // work_type: 2,
          art_id: this.$store.state.user.info?.user_info?.art_info.data_id,
          page_num: page,
          page_count: page_size,
          // recycle: 0
        })
        .then((res) => {
          this.artWorkList = Array.isArray(res.result.item_list) ? res.result.item_list : [];
          console.log(res);

          callback(this.artWorkList, this.artWorkList.length);
        });
    },
    updateArtWorks(params) {
      this.$api.updateArtWorks({ share_times: params.share_times }, { data_id: params.data_id }).then(res => {
        if (res.status == '$SUCCESS') {
          this.$message.success('复制链接成功')
          this.$refs.page.refresh()
        }
      })
    },
    // 分享功能（就是复制导航栏内容）
    handleShare(data_id, share_times) {
      if (this.$store.state.user.token) {
        const params = {
          share_times: ++share_times,
          data_id
        }
        this.updateArtWorks(params)
      } else {
        this.$message.error('请先登陆')
      }
      //创建input标签
      const input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = window.location.href
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      // this.$message.success('复制视频链接成功!')
      //移除input标签
      document.body.removeChild(input)
    }
  },
};
</script>

<style scoped lang="less">
.video-admin {

  .menu {
    height: 100%;
    margin-right: 90px;
    margin-bottom: 50px;
    margin: 0 90px 50px 100px;

    .content {
      // width: 150px;
      line-height: 24px;
      margin-right: 80px;
      display: inline-block;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      list-style-type: none;

      &.active-content {
        color: #000;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .pagin {
    background: #fff;
    padding-bottom: 40px;
  }

  .video-list {
    background: #fff;
    padding: 40px 45px 12px;

    .upload-icon {
      height: 216px;
      margin-bottom: 48px;

      .box {
        width: 322px;
        height: 216px;
        background: #f3f4f4;
        background: #f3f4f4;
        border: 0;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        img {
          width: 56px;
          height: 56px;
        }
      }

      .btn {
        margin-top: 87px;
      }
    }

    .video-info {
      margin-bottom: 48px;

      .box {
        width: 322px;
        height: 216px;
        background: #f3f4f4;
        display: inline-block;
        cursor: pointer;
        vertical-align: top;
        margin-right: 48px;

        ::v-deep(.el-image) {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        display: inline-block;
        color: #999;
        font-size: 16px;

        .title {
          line-height: 16px;
          font-weight: 600;
          color: #000;
          margin-bottom: 24px;
        }

        .time {
          margin: 24px 0;
        }

        .collect {
          p {
            display: inline-block;
            margin-right: 20px;
            img {
              vertical-align: top;
            }
          }
        }
      }
    }

    .btn {
      float: right;
      cursor: pointer;

      .share,
      .edit,
      .delete {
        width: 166px;
        height: 42px;
        border: 1px solid #e8e8e8;
        font-size: 16px;
        color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .delete {
        margin: 38px 0;
      }
    }

    .upload-icon {
      .box {
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
